<template>
    <div class="t1">
        <van-nav-bar :title="data.title" left-text="返回" @click-left="onClickLeft" left-arrow>
        </van-nav-bar>
        <div ref="box">
        <div ref="cont" class="cont">
        <div class="imgItem" v-if="data.vfurl===''">
            <img :src="data.photo_path" alt="">
        </div>
        <div class="videoItem" v-else>
            <video autoplay controls :src="data.vfurl" style="width:100%; height:100%; object-fit: fill"></video>
        </div>
        <div class="contBox">
            <div class="top">
                <div class="title">{{data.title}}</div>
                <div class="info">
                    精品 · 浏览{{data.views_count_text}} · 收藏{{data.favo_counts_text}} · 学做{{data.comments_count_text}}
                </div>
            </div>
            <div class="user">
                <div class="left" v-if="data.user">
                    <div class="userImg">
                        <img :src="data.user.user_photo" alt="" @click="binuser(data.user.user_id)">
                    </div>
                    <div class="userName">{{data.user.nickname}} <span>LV.{{data.user.lvl}}</span></div>
                </div>
            </div>
            <div class="titleText">
                {{data.cookstory}}
            </div>
            <div class="food">
                <div class="foodTitle">食材清单</div>
                <div class="foodInfo" v-for="(item,i) in data.major" :key="i">
                    <div class="left">{{item.title}}</div>
                    <div class="right">{{item.note}}</div>
                </div>
            </div>
            <div class="buzhou">
                <div class="buzhouTitle">
                    烹饪步骤
                </div>
                <div class="buzhouCont" v-for="(item,i) in data.cookstep" :key="i">
                    <div class="buzhouItem">
                        步骤<span> {{item.position}}/ {{data.cookstep.length}}</span>
                    </div>
                    <div class="buzhouImg">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="buzhouText" style="white-space: pre-wrap;">
                        {{item.content}}
                    </div>
                </div>
                <div class="time">
                    发布于{{data.create_time |time}}
                </div>
            </div>
        </div>
        </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        name:'t1',
        data() {
            return {
                data:{},
                id:0
            }
        },
        created(){
            this.id = this.$route.query.id
             this.axios.get(`https://apis.netstart.cn/douguo/recipe/detail/${this.id}`). then((response) => {
            this.data = response.data.result.recipe
            })
        },
        filters: {
            time: function (value) {
                if (value) {
                   let a = value.split(' ')
                    return a[0] 
                }
                return ''
            }
        },
        methods:{
            onClickLeft() {
                // this.$router.push({name:'activity'});
                this.$router.back()
            },
            binuser(id){
                this.$router.push({name:'caipu',query:{id}})
            }
            // binScroll(){
            //     let length = this.aboutdata.length
            //     clearTimeout(this.timer)
            //     this.timer = setTimeout(()=>{
            //         if (this.$refs.box.scrollHeight-this.$refs.box.scrollTop===this.$refs.box.scrollHeight) {
            //             this.axios.get(`https://apis.netstart.cn/douguo/note/related/${this.data.id}/${length}/20`). then((response) => {
            //             this.aboutdata.push(...response.data.result.list)
            //             })
            //         }
            //     },300)
            // },
        },

    }
</script>

<style lang="less" scoped>
    /deep/.van-nav-bar__text {
    color: #6e6e6e;
    }
    /deep/.van-nav-bar .van-icon {
    color: #6e6e6e;
    }
    .t1{
        .imgItem{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .cont{
            height: calc(100vh - 46px);
            overflow: auto;
        }
        .contBox{
            padding: 20px;
            box-sizing: border-box;
            .top{
                .title{
                    font-size: 18px;
                    font-weight: 800;
                    margin-bottom: 10px;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
            .user{
                margin: 20px 0;
                height: 40px;
                display: flex;
                .left{
                    display: flex;
                    height: 100%;
                    .userImg{
                        height: 100%;
                        img{
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    .userName{
                        line-height: 40px;
                        margin-left: 10px;
                        font-size: 14px;
                        span{
                            color: #fbc959;
                        }
                    }
                }
            }
            .titleText{
                line-height: 25px;
            }
            .food{
                margin-top: 20px;
                .foodTitle{
                    font-size: 16px;
                    font-weight: 700;
                }
                .foodInfo{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0;
                }
            }
            .buzhou{
                .buzhouTitle{
                    font-size: 16px;
                    font-weight: 700;
                }
                .buzhouCont{
                    .buzhouItem{
                        margin: 10px 0;
                    }
                    .buzhouImg{
                        width: 100%;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                    }
                    .buzhouText{
                        margin-top: 5px;
                        font-size: 14px;
                    }
                }
                .time{
                    margin: 10px 0;
                    color: #a3a3a3;
                }
            }
        }
    }
</style>